<script setup lang="ts">
import { RouterView, useRouter, useRoute } from 'vue-router'
import { computed } from 'vue'
import type { RouteRecordRaw } from 'vue-router'
import MenuItem from '@/components/MenuItem.vue'

// 获取路由实例和当前路由对象
const router = useRouter()
const route = useRoute()

// 过滤掉不需要在菜单中显示的路由（如 meta.hidden = true）
function filterMenuRoutes(routes: RouteRecordRaw[]): RouteRecordRaw[] {
  return routes.filter((r: RouteRecordRaw) => !r.meta?.hidden)
}

// 计算属性，获取需要显示的菜单路由
const menuRoutes = computed(() => filterMenuRoutes(router.options.routes as RouteRecordRaw[]))
</script>

<template>
  <!-- 整体布局容器 -->
  <el-container class="layout">
    <!-- 顶部栏 -->
    <el-header class="header">
      <div class="logo">LOGO</div>
      <div class="status-bar">状态栏</div>
    </el-header>
    <!-- 主体区域，包含侧边栏和主内容区 -->
    <el-container class="container">
      <!-- 侧边栏，自动生成菜单 -->
      <el-aside class="sidebar">
        <el-menu :default-active="route.path" router>
          <!-- 递归渲染多级菜单 -->
          <MenuItem v-for="item in menuRoutes" :key="item.path" :item="item" />
        </el-menu>
      </el-aside>
      <!-- 主内容区，随路由变化 -->
      <el-main class="main">
        <RouterView />
      </el-main>
    </el-container>
    <!-- 底部版权栏 -->
    <el-footer class="footer"> © 2024 你的公司名. 保留所有权利. </el-footer>
  </el-container>
</template>

<style scoped>
.layout {
  background:#a19e9e;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  background:#a19e9e;
  color: #fff;
  padding: 0 20px;
}
.logo {
  font-weight: bold;
  font-size: 20px;
}
.container {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
}
.sidebar {
  width: 200px;
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  min-height: 0;
}
.menu {
  width: 200px;
  height: auto;
  color: #fff;
  flex: 1;
}
.menu-item {
  width: 200px;
  height: 40px;
  color: #fff;
}

.main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 20px;
  max-height: calc(100vh - 60px - 40px);
  background: #fff;
  overflow: auto;
}
.footer {
  height: 40px;
  background:#a19e9e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
:deep(.el-menu) {
  background: #a19e9e;
  border-right: none;
  width: 100%;
  height: 100%;
}
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  min-height: 40px;
}
</style>
